<template>
	<view class="inside-Apply">
		<xbd-pages-content title="用车申请">
			<template #content>
				<view class="content" :style="'minHeight : ' + windowHeight + 'px;'">
					<uni-forms ref="form" :modelValue="formData" :rules="rules">
						<!-- 申请部门 -->
						<view class="first_input">
							<uni-forms-item :label-width="96" label="申请部门">
								<view class="department">{{user_department}}</view>
							</uni-forms-item>
						</view>
						<!-- 乘车人数 -->
						<uni-forms-item :label-width="96" required label="乘车人数" name="apply_person_count">
							<uni-easyinput class="input" type="text" :clearable="false"
								v-model="formData.apply_person_count" placeholder="请输入乘车人数" />
						</uni-forms-item>
						<!-- 车辆类型 -->
						<!-- <uni-forms-item :label-width="96" required label="车辆类型" name="apply_plate">
							<view class="choose">
								<xbd-select :carId.sync="formData.apply_plate" :visible.sync="visible"
									:infoList="typeArr" @selectCar="selectCar">
									<template>
										<view class="select" @click="visible = true">
											<view class="text" v-if="formData.apply_plate.length!==0"> {{formData.apply_plate || '请选择车辆类型'}} </view>
											<view class="text prColor" v-else> 请选择车辆类型 </view>
											<image class="image" src="@/static/images/health/right.svg" mode="">
											</image>
										</view>
									</template>
								</xbd-select>
								<view class="unit">
									座
								</view>
							</view>


						</uni-forms-item> -->
						<!-- 目的地 -->
						<uni-forms-item :label-width="96" required label="目的地" name="apply_destination">

							<uni-easyinput type="text" :clearable="false" maxlength="14" class="input"
								v-model="formData.apply_destination" placeholder="请输入目的地名称" />
						</uni-forms-item>
						<!-- 行驶路线 -->
						<view class="first_input">
							<uni-forms-item :label-width="90" label="行驶路线" name="remark">
								<uni-easyinput type="text" :clearable="false" maxlength="20" class="input"
									v-model="formData.remark" placeholder="请输入途径点名称" />
							</uni-forms-item>
						</view>
						<!-- 用车事由 -->
						<uni-forms-item class="area" :label-width="96" required label="用车事由" name="apply_reason">
							<uni-easyinput :clearable="false" class="textarea" type="textarea"
								v-model="formData.apply_reason" placeholder="请输入用车申请理由" :maxlength="100">
							</uni-easyinput>
							<!-- #ifdef APP-PLUS || H5 -->
							<view class="mit">
								字数限制：100
							</view>
							<!-- #endif -->
						</uni-forms-item>
						<!-- 用车时间 -->
						<!-- #ifdef APP-PLUS || H5 -->
						<view class="date">
							<uni-forms-item :label-width="96" required label="用车时间" name="dateSta">
								<view class="box">
									<picker fields="day" mode="date" :value="formData.dateSta" :start="startDate"
										:end="endDate" @change="bindDateChangeSta">
										<view class="uni-input">
											<view class="">
												<image src="../../../static/images/date2.svg"></image>
												<text>{{formData.dateSta}}</text>
											</view>
										</view>
									</picker>
								</view>
							</uni-forms-item>
							<uni-forms-item :label-width="0" name="timeSta">
								<view class="box">
									<picker mode="time" :value="formData.timeSta" @change="bindTimeChangeSta">
										<view class="uni-input">
											<view class="">
												<image class="date3" src="../../../static/images/date3.svg"></image>
												<text>{{formData.timeSta}}</text>
											</view>
										</view>
									</picker>

								</view>
							</uni-forms-item>
						</view>
						<view class="tag">
							至
						</view>
						<view class="date">
							<uni-forms-item :label-width="96" name="dateEnd">
								<view class="box">
									<picker fields="day" mode="date" :value="formData.dateEnd" :start="startDate"
										:end="endDate" @change="bindDateChangeEnd">
										<view class="uni-input">
											<view class="">
												<image src="../../../static/images/date2.svg"></image>
												<text>{{formData.dateEnd}}</text>
											</view>
										</view>
									</picker>

								</view>
							</uni-forms-item>
							<uni-forms-item :label-width="0" name="timeEnd">
								<view class="box">
									<picker mode="time" :value="formData.timeEnd" @change="bindTimeChangeEnd">
										<view class="uni-input">
											<view class="">
												<image class="date3" src="../../../static/images/date3.svg"></image>
												<text>{{formData.timeEnd}}</text>
											</view>
										</view>
									</picker>
								</view>
							</uni-forms-item>
						</view>
						<!-- #endif -->
						<!-- #ifndef APP-PLUS || H5 -->
						<uni-forms-item :label-width="96" required label="用车时间" name="dateSta">
							<picker fields="day" mode="date" :value="formData.dateSta"
							@change="bindDateChangeSta">
								<view class="smoll_date">
									<view>
										<image src="../../../static/images/date2.svg"></image>
										<text>{{formData.dateSta}}</text>
									</view>
								</view>
							</picker>
						</uni-forms-item>
						<view class="tag">
							至
						</view>
						<uni-forms-item :label-width="96" name="dateEnd">
							<picker fields="day" mode="date" :value="formData.dateEnd" :start="formData.dateSta"
								@change="bindDateChangeEnd">
								<view class="smoll_date">
									<view>
										<image src="../../../static/images/date2.svg"></image>
										<text>{{formData.dateEnd}}</text>
									</view>
								</view>
							</picker>
						</uni-forms-item>
						<!-- #endif -->
						<!-- 是否自驾 -->
						<!-- <uni-forms-item :label-width="96" required label="是否自驾" name="option">
							<radio-group @change="radioChange">
								<label class="label" >
									<radio value=false :checked="formData.option === false"
										style="margin-right: 20rpx;" />
									<text>否</text>
								</label>
								<label class="label" style="margin-left: 128rpx;">
									<radio value=true :checked="formData.option === true"
										style="margin-right: 20rpx;" />
									<text>是</text>
								</label>
							</radio-group>
						</uni-forms-item> -->
						<uni-forms-item :label-width="96" required label="用车范围" name="scopeRido">
							<radio-group @change="radioScope">
								<label class="label" >
									<radio value=false :checked="formData.scopeRido === false"
										style="margin-right: 20rpx;" />
									<text>市内</text>
								</label>
								<label class="label" style="margin-left: 100rpx;">
									<radio value=true :checked="formData.scopeRido === true"
										style="margin-right: 20rpx;" />
									<text>市外</text>
								</label>
							</radio-group>
						</uni-forms-item>
					</uni-forms>
					<view class="foot">
						<view class="btns">
							<button type="default" class="draft" @click="cancel">取消</button>
							<button type="default" class="upload" @click="submit">确认提交</button>
						</view>
					</view>
				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		UseCar
	} from '@/api/index.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				flag: true,//防抖
				visible: false,
				typeArr: [],
				apply_plate: '',
				user_department:'',
				formData: {
					apply_person_count: '',
					apply_plate: '',
					apply_destination: '',
					apply_reason: '',
					remark:'',
					// option: false,
					scopeRido: false,
					driving:0,
					scope:'cityin',
					// #ifdef APP-PLUS || H5
					dateSta: currentDate,
					dateEnd: currentDate,
					timeSta: '08:00',
					timeEnd: '19:00',
					// #endif 
					// #ifndef APP-PLUS || H5 
					dateSta: currentDate + ' 08:00',
					dateEnd: currentDate + ' 19:00',
					// #endif
				},
				carMsg: {
					c_code: 1001,
					c_character: '',
					code_name: '',
					type_code: 0,
				},
				rules: {
					apply_destination: {
						rules: [{
								required: true,
								errorMessage: '目的地：请填写目的地',
							}, {
								maxLength: 14,
								errorMessage: '目的地：字数限制14个字',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value.indexOf(" ") !== -1) {
										callback('目的地：不能输入带有空格的内容');
									}
									return true
								}
							}
						]
					},
					dateSta: {
						rules: [{
							required: true,
							errorMessage: '用车时间：请选择开始日期',
						}]
					},
					dateEnd: {
						rules: [{
								required: true,
								errorMessage: '用车时间：请选择结束日期',
							},
							{
								// #ifdef APP-PLUS || H5
								validateFunction: (rule, value, data, callback) => {
									if (value < this.formData.dateSta) {
										callback('用车时间：请重新选择用车时间')
									}
									return true
								}
								// #endif
								// #ifndef APP-PLUS || H5
								validateFunction: (rule, value, data, callback) => {
									if (value <= this.formData.dateSta) {
										callback('用车时间：请重新选择用车时间')
									}
									return true
								}
								// #endif
							}
						]
					},
					timeSta: {
						rules: [{
							required: true,
							errorMessage: '用车时间：请选择开始时间',
						}]
					},
					timeEnd: {
						rules: [{
								required: true,
								errorMessage: '用车时间：请选择结束时间',
							},
							{
								validateFunction: (rule, value, data, callback) => {
									console.log(value)
									if (this.formData.dateSta === this.formData.dateEnd && value <= this.formData
										.timeSta) {
										callback('用车时间：请重新选择用车时间')
									}
									return true
								}
							}
						]
					},

					apply_reason: {
						rules: [{
							required: true,
							errorMessage: '用车事由：请填写申请理由',
						}],
						validateTrigger: 'bind'
					},
					apply_person_count: {
						rules: [{
							required: true,
							errorMessage: '乘车人数：请填写乘车人数',
						}, {
							pattern: '^\\+?[1-9][0-9]*$',
							errorMessage: '乘车人数：输入大于0的整数',
						}]
					},
					apply_plate: {
						rules: [{
							required: true,
							errorMessage: '车辆类型：请选择车辆类型',
						}]
					},
				}
			};
		},
		methods: {
			selectCar(options) {
				this.apply_plate = options.name;
				this.carMsg.c_code = options.value;
				this.carMsg.c_character = options.label;
				this.carMsg.code_name = options.name;
				this.carMsg.type_code = options.type;
			},
			radioChange(e) {
				this.formData.option = e.detail.value;
				if(e.detail.value === 'true'){
					this.formData.driving = 1
					console.log('是')
				}else{
					this.formData.driving = 0
					console.log('否')
				}
			},
			radioScope(e) {
				this.formData.scopeRido = e.detail.value;
				if(e.detail.value === 'true'){
					this.formData.scope = 'cityout'
					console.log('是')
				}else{
					this.formData.driving = 'cityin'
					console.log('否')
				}
			},
			cancel() {
				uni.navigateBack({
					delta: 1
				});
			},
			bindDateChangeSta: function(e) {
				this.formData.dateSta = e.target.value
				this.dateSta = e.target.value
			},
			bindDateChangeEnd: function(e) {
				this.formData.dateEnd = e.target.value
				this.dateEnd = e.target.value
			},
			bindTimeChangeSta: function(e) {
				this.formData.timeSta = e.target.value
			},
			bindTimeChangeEnd: function(e) {
				this.formData.timeEnd = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			async submit(val) {
				this.$refs.form.setRules(this.rules);
				const info = {
					apply_department_name: this.user_department,
					apply_person_count: this.formData.apply_person_count,
					seat_num_code:this.carMsg.c_code,
					
					apply_destination: this.formData.apply_destination,
					apply_reason: this.formData.apply_reason,
					remark:this.formData.remark,
					wether_self_driving: this.formData.driving,
					apply_position_type:this.formData.scope,
					
					// #ifdef APP-PLUS || H5 
					apply_start_time: this.formData.dateSta + ' ' + this.formData.timeSta + ':00',
					apply_end_time: this.formData.dateEnd + ' ' + this.formData.timeEnd + ':00',
					// #endif 
					// #ifndef APP-PLUS || H5
					apply_start_time: this.formData.dateSta + ':00',
					apply_end_time: this.formData.dateEnd + ':00',
					// #endif 
				};
				const o = {
					obj: info
				}
				try {
					
					const valid = await this.$refs.form.validate();
					
					if (this.flag) {
						try {
							this.flag = false
							this.$showLoading('加载中');
							const res=await UseCar.postFrom(o);
							uni.hideLoading();
							console.log('通过')
							if(res.success){
								// this.flag = true
								uni.showToast({
									title: '您的申请提交成功！',
									icon: 'none',
								})
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 1500)
							}else{
								this.flag = true
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
							}
							
						} catch (err) {
							uni.hideLoading();
						}
					};
				} catch (err) {
					console.log(err)
					uni.showToast({
						title: err[0].errorMessage,
						icon: 'none'
					})
				}

			},
			//获取用户信息
				
			async useMsg(){
				try{
					const res = await UseCar.getUserInfo()
					console.log(res,'use')
					this.user_department = res.data.dept_name
				}catch(e){
					//TODO handle the exception
				}
			},
			// 获取车辆类型
			async init() {
				try {
					const {
						data: {
							list
						}
					} = await UseCar.getClass();
					console.log(list)
					uni.hideLoading();
					list.forEach((item) => {
						this.typeArr.push({
							value: item.c_code,
							label: item.code_name,
							name: item.code_name,
							type: item.type_code
						})
					})
				} catch (e) {
					uni.hideLoading();
					console.log(e);
				}
			},
		},
		computed: {
			...mapState(['windowHeight', 'userInfo']),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},

		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad() {
			console.log(this.userInfo)
			this.init()
			this.useMsg()
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep uni-button:after {
		border: none !important;
	}

	::v-deep .is-input-border {
		border-color: #888888 !important;
		color: #999999;
	}
	::v-deep .easy-select {
		padding-left: 20rpx !important;
	}

	::v-deep .uni-input-placeholder {
		color: #999999;
	}

	::v-deep .data-v-12974cdc {
		white-space: nowrap;
	}

	::v-deep .uni-input {
		white-space: nowrap;
	}

	::v-deep .uni-forms-item__label {
		align-items: flex-start;
	}
	.first_input {
		box-sizing: border-box;
		padding-left: 5px;
	}

	.content {
		padding: 50rpx;
		background-color: #FFFFFF;
	}

	.tag {
		font-size: 28rpx;
		color: #194769;
		margin: -10px 0 15px 200rpx;
	}

	.choose {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	}

	.input {
		width: 100%;
		height: 30px;
		line-height: 30px;
		border: 1px solid #999999;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding-left: 20rpx;
		font-size: 28rpx;

		color: #999999 !important;
	}

	.select {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 370rpx;
		
		height: 28px;
		line-height: 28px;
		border-radius: 8rpx;
		border: 1px solid #999999;
		box-sizing: border-box;
		padding: 0 20rpx 0 20rpx;
		// color: #BBC0C9 !important;

		.text {
			flex: 1;
			text-align: center;
			
		}
		.prColor{
			color: #BBC0C9 !important;
		}

		.image {
			transform: rotate(90deg);
			width: 38rpx;
			height: 38rpx;
		}
	}

	// .select {
	// 	// width: 100%;
	// 	height: 30px;
	// 	border: 1px solid #999999;
	// 	border-radius: 8rpx;
	// 	padding-left: 20rpx;
	// 	box-sizing: border-box;
	// 	padding-top: 5px;
	// 	font-size: 28rpx;


	// }

	.department {
		padding-top: 6rpx;
		box-sizing: border-box;
		width: 400rpx;
		// height: 30px;
		// line-height: 30px;
		font-size: 28rpx;
		color: #394954 !important;
		white-space:normal;
		overflow: hidden;
		word-break: break-all;
	}

	.foot {
		// position: fixed;
		// box-sizing: border-box;
		// padding: 20rpx 4rpx 80rpx 4rpx;
		// bottom: 0rpx;
		// background-color: #FFFFFF;
		margin-top: 100rpx;
		.btns {
			display: flex;
			justify-content: space-between;

			button {
				width: 300rpx;
				height: 30px;
				line-height: 30px;
				font-size: 28rpx;
				border-radius: 8rpx;
				box-sizing: border-box;
			}

			.draft {
				color: #FFFFFF;
				margin-right: 50rpx;
				background: url(../../../static/images/meal/gary.png) no-repeat;
				background-size: 100% 100%;
			}

			.upload {
				background: url(../../../static/images/common/bluebg.png) no-repeat;
				background-size: 100% 100%;
				color: $uni-text-color-inverse;
			}
		}
	}

	.date {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;

		.box {
			width: 200rpx;
			box-sizing: border-box;
			padding-right: 16rpx;
			height: 28px;
			line-height: 28px;
			border: 1px solid #999999;
			border-radius: 4px;
			// margin-right: 20rpx;

			.uni-input {
				padding-left: 10rpx;
				font-size: 28rpx;
				color: #999999;

				image {
					width: 22rpx;
					height: 22rpx;
					margin-right: 4rpx;
				}

				.date3 {
					vertical-align: sub;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.smoll_date {
		display: flex;
		align-items: center;
		height: 32px;

		font-size: 28rpx;
		width: 100% !important;
		border: 2rpx solid #999999;
		border-radius: 4px;
		color: #999999;
		box-sizing: border-box;

		image {
			vertical-align: sub;
			width: 22rpx;
			height: 22rpx;
			margin: 0 24rpx 4rpx 24rpx;
		}
	}

	.textarea {
		width: 100%;
		height: 100px;
		border: 1px solid #999999;
		border-radius: 5px;
		box-sizing: border-box;
		padding: 20rpx;

		font-size: 28rpx;

		color: #999999;
	}

	.area {
		position: relative;

		.mit {
			position: absolute;
			bottom: 30px;
			right: 30rpx;
			font-size: 24rpx;
			color: #999999;
		}
	}

	.all {

		color: #999999;
		font-size: 24rpx;
		margin-bottom: 20px;
	}
</style>
